import React from 'react';

import { connect } from 'dva'

import Title from 'components/Title'
import Chart from 'components/Chart'

@connect(({ gis }) => ({ ...gis }))
class Analysis extends React.Component {
  static defaultProps = {
    echartsConf: [
      {
        key: 'gjfx',
        label: '管径分析图',
        chart: {
          type: 'Common', dataSource: 'AnalysisResource1',
          showLegend: true,
          columns: {
            seriesItems: [{ name: '口径', field: 'value', type: 'bar' }],
            xAxis: { field: '口径' },
            yAxis: [{ name: 'm' }],
          }
        },
        server: {
          payload: { groupByFieldsForStatistics: "口径" }, alias: 'value', type: 1
        },
      },
      {
        key: 'gcfx',
        label: '管材分析图',
        chart: {
          type: 'Common', dataSource: 'AnalysisResource2',
          columns: {
            seriesItems: [{ name: '管线材质', field: 'value', type: 'bar' }],
            xAxis: { field: '管线材质' },
            yAxis: [{ name: 'm' }],
          }
        },
        server: {
          payload: { groupByFieldsForStatistics: "管线材质" }, alias: 'value', type: 2
        },
      }
    ]
  }
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.init();
  }

  init = async () => {
    await this.setDateECharts()
  }

  // 人工维护数据：指标逻辑
  queryECharts = async (server) => {
    let { payload, alias, serverType, type } = server;

    const outStatistics = `[{"statisticType":"SUM","onStatisticField":"管长","outStatisticFieldName": ${alias}}]`
    if (alias) Object.assign(payload, { outStatistics })

    Object.assign(payload, { type })
    await this.props.dispatch({
      type: serverType ? serverType : 'gis/queryAnalysis',
      payload
    })
  }

  // 图表
  setDateECharts = () => {
    const { echartsConf } = this.props;
    echartsConf.map(ele => {
      const { server } = ele;
      if (server) this.queryECharts(server);
    })
  }

  // 图表渲染
  // 与 maintenance业务不尽相同，此处接口调用一次用于两个图表，手动处理数据
  RenderECharts = () => {
    const { echartsConf } = this.props;
    const { props } = this;

    let charts = null;
    charts = echartsConf.map(ele => {
      const { key, label, chart } = ele;
      const { type: chartType, dataSource, columns, color, other } = chart;
      return (
        <Title key={key} title={label}>
          <Chart
            type={chartType}
            color={color}
            columns={columns}
            dataSource={props[dataSource]}
            other={other}
            style={{ paddingBottom: '20px' }}
          />
        </Title>
      )
    })
    return <>{charts}</>
  }

  render() {
    return (
      <>{this.RenderECharts()}</>
    )
  }
}

export default Analysis;
